sorting dynamic table created by form inputs [migrated]

Posted by mille on Pro Webmasters See other posts from Pro Webmasters or by mille
Published on 2012-10-16T17:55:37Z Indexed on 2012/10/16 23:21 UTC
Read the original article Hit count: 303

Filed under:

i am having problems with sorting can someone help to sort this table not just by its form entry id but onclick with some other columns

i tried a lot of plugins but cant get anything to work and i dont know what to do

i am new at this i sorry for my english thanks.

here is the js:

  var Animals ={
      index: window.localStorage.getItem("Animals:index"),
        $table: document.getElementById("animals-table"),
        $form: document.getElementById("animals-form"),
        $button_save: document.getElementById("animals-save"),
        $button_discard: document.getElementById("animals-discard"),

        init: function() {
                 if (!Animals.index) {
                window.localStorage.setItem("Animals:index",                                               Animals.index = 1);
            }
            Animals.$form.reset();
            Animals.$button_discard.addEventListener("click",   function(event) {
                Animals.$form.reset();
                Animals.$form.id_entry.value = 0;
            }, true);
            Animals.$form.addEventListener("submit", function(event) {
 var entry = {
 id: parseInt(this.id_entry.value),
                    animal_id:this.animal_id.value,
                    animal_name: this.animal_name.value,
                    animal_type: this.animal_type.value,
                    bday: this.bday.value,
                    animal_sex: this.animal_sex.value,
                    mother_name: this.mother_name.value,
                    farm_name: this.farm_name.value,
                    money: this.money.value,
                    weight: this.weight.value,
                    purchase_partner: this.purchase_partner.value

                };
                if (entry.id === 0) {
                    Animals.storeAdd(entry);
                    Animals.tableAdd(entry);
                }
                else { // edit
                    Animals.storeEdit(entry);
                    Animals.tableEdit(entry);
                }

                this.reset();
                this.id_entry.value = 0;
                event.preventDefault();
            }, true);


            if (window.localStorage.length - 1) {
                var animals_list = [], i, key;
                for (i = 0; i < window.localStorage.length; i++) {
                    key = window.localStorage.key(i);
                    if (/Animals:\d+/.test(key)) {
                        animals_list.push(JSON.parse(window.localStorage.getItem(key)));
                    }
                }


if (animals_list.length) {
  animals_list.sort(function(a, b)
 {return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);})
.forEach(Animals.tableAdd);}



  Animals.$table.addEventListener("click", function(event) {
 var op = event.target.getAttribute("data-op");
  if (/edit|remove/.test(op)) {
                    var entry =    JSON.parse(window.localStorage.getItem("Animals:"+ event.target.getAttribute("data- id")));
   if (op == "edit") {

Animals.$form.id_entry.value = entry.id;
                          Animals.$form.animal_id.value = entry.animal_id;
                        Animals.$form.animal_name.value = entry.animal_name;
                        Animals.$form.animal_type.value = entry.animal_type;
                        Animals.$form.bday.value = entry.bday;
                        Animals.$form.animal_sex.value = entry.animal_sex;
                        Animals.$form.mother_name.value = entry.mother_name;
                        Animals.$form.farm_name.value = entry.farm_name;
                        Animals.$form.money.value = entry.money;
                        Animals.$form.weight.value = entry.weight;
                        Animals.$form.purchase_partner.value = entry.purchase_partner;

                    }
                    else if (op == "remove") {
                        if (confirm('Are you sure you want to remove this animal from your list?' )) {
                            Animals.storeRemove(entry);
                            Animals.tableRemove(entry);
                        }
                    }
                    event.preventDefault();
                }
            }, true);
        },

        storeAdd: function(entry) {
            entry.id = Animals.index;
            window.localStorage.setItem("Animals:index", ++Animals.index);
            window.localStorage.setItem("Animals:"+ entry.id, JSON.stringify(entry));
        },
        storeEdit: function(entry) {
            window.localStorage.setItem("Animals:"+ entry.id, JSON.stringify(entry));
        },
        storeRemove: function(entry) {
            window.localStorage.removeItem("Animals:"+ entry.id);
        },

        tableAdd: function(entry) {
            var $tr = document.createElement("tr"), $td, key;
            for (key in entry) {
                if (entry.hasOwnProperty(key)) {
                    $td = document.createElement("td");
                    $td.appendChild(document.createTextNode(entry[key]));
                    $tr.appendChild($td);
                }
            }
            $td = document.createElement("td");
            $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
            $tr.appendChild($td);
            $tr.setAttribute("id", "entry-"+ entry.id);
            Animals.$table.appendChild($tr);
        },
        tableEdit: function(entry) {
            var $tr = document.getElementById("entry-"+ entry.id), $td, key;
            $tr.innerHTML = "";
            for (key in entry) {
                if (entry.hasOwnProperty(key)) {
                    $td = document.createElement("td");
                    $td.appendChild(document.createTextNode(entry[key]));
                    $tr.appendChild($td);
                }
            }
            $td = document.createElement("td");
            $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
            $tr.appendChild($td);
        },
        tableRemove: function(entry) {
            Animals.$table.removeChild(document.getElementById("entry-"+ entry.id));
        }
    };

    Animals.init();

© Pro Webmasters or respective owner

Related posts about JavaScript